<template>
  <div  class="trash_can">
    <transition
      name="fly"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-show="show" ref="target" class="target_wraper">
        <slot name="target">📋</slot>
      </div>
    </transition>

    <div ref="trash" class="space_wraper">
      <slot ref="space" name="space">🗑</slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  getCurrentInstance, ref, watchEffect, defineProps,
} from "vue";

type Position = { left: number; top: number };
const context = getCurrentInstance();
const props = defineProps({
  refPosition: { type: Object, default: { left: 0, top: 0 } as Position },
});

const show = ref(false);

function handleBeforeEnter(el: Element) {
  const elDom = context?.refs.trash as HTMLElement;

  const rect = elDom.getBoundingClientRect();
  const { x } = rect;
  const { y } = rect;
  const refX = props.refPosition.left;
  const refY = props.refPosition.top;
  console.log("el before", rect, -(x - refX), -(
    y - refY));
  (el as HTMLElement).style.transform = `translate(${-(x - refX)}px,${-(
    y - refY
  )}px)`;
}

function handleEnter(el: Element, done: () => void) {
  console.log(document.body.offsetHeight);
  (el as HTMLElement).style.transform = "translate(0,0)";
  (el as HTMLElement).style.opacity = "0.1";
  el.addEventListener("transitionend", done);
}

function handleAfterEnter(el: Element) {
  console.log("af");
  show.value = false;
  (el as HTMLElement).style.display = "none";
  (el as HTMLElement).style.opacity = "1";
}

watchEffect(() => {
  const { left, right } = props.refPosition;
  if (left || right) {
    show.value = true;
    console.log(props.refPosition);
  }
});
</script>

<style lang="scss" scoped>
// .fly-enter-to,
// .fly-leave-from {
//   opacity: 1;
// }

.fly-enter-active {
  transition: all 0.5s ease-in-out;
}
.target_wraper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
.trash_can {
  text-align: right;
  display: flex;
  position: relative;
  .space_wraper {
    font-size: 50px;
  }
  .target_wraper {
    font-size: 20px;
  }
}
</style>
